<template>
  <div id="balance_recharge">
    <c-title :hide="false" :text="pageTitle"></c-title>
    <!-- 优化 新样式-->
    <diyBackGround></diyBackGround>
    <div class="main">
      <div class="txt">
        当前{{ pageOptions.numText || "--" }}<br />
        <em style="font-weight: bold; font-size: 25px">{{ checkInfo.credit || "--" }}</em>
      </div>

      <van-cell-group inset style="margin: 0;">
        <van-field center v-if="showTRMember" v-model="transfer_id" :label="`${pageOptions.transferName || '--'}ID`" :placeholder="`请输入${pageOptions.transferName}的会员ID`" :error-message="memberlabel" />
        <van-field center v-if="showBindMember" :readonly="bindMemberStatus" v-model="checkInfo.third_uid" :label="`${pageOptions.showBindMemberOption.name || '--'}`" :placeholder="`请输入${pageOptions.showBindMemberOption.name}`">
          <template #button>
            <van-button size="small" color="var(--themeBaseColor)" plain type="danger" v-if="bindMemberStatus" @click.stop="unbindMemberFn">点击解绑</van-button>
            <van-button size="small" color="var(--themeBaseColor)" plain :hairline="true" type="primary" v-if="!bindMemberStatus" @click.stop="bindMemberFn">点击绑定</van-button>
          </template>
        </van-field>
        <van-field center v-model="transferTargetVal" :label="`${pageOptions.transferTarget.name || ''}`"
        :placeholder="`请输入${pageOptions.transferTarget.name||''}`" v-if="pageOptions.transferTarget">
          <template #button v-if="pageOptions.transferTarget.api">
            <van-button size="small" color="var(--themeBaseColor)" plain type="danger" @click.stop="checkTarget">确认</van-button>
          </template>
        </van-field>
      </van-cell-group>

      <div class="detailBox">
        <div class="zzPrice">
          <div class="title">{{ pageOptions.transferText }}数额</div>
          <div class="priceInpBox">
            <div class="priceTxt" v-if="!hideCNY">{{ $i18n.t("money") }}</div>
            <input type="text" v-model="info_form.transfer_money" placeholder="0.00" />
          </div>
        </div>
        <div class="btn" @click="beforeConfirm" :class="{'disabled-class': disabledTar}">确认{{ pageOptions.transferText }}</div>
      </div>
      <div class="themeColor t-l margin-top-6 f-11" style="padding: 0 8px;" v-if="pageOptions.transferRatio">
        <div>{{ pageOptions.transferRatio.PCTDesc }}：{{ pageOptions.transferRatio.PCT }}%</div>
        <div>{{ pageOptions.transferRatio.inputDesc }}：{{ transferRatioVal }}，{{ pageOptions.transferRatio.actualDesc }}：{{ info_form.transfer_money||'--' }}</div>
      </div>
    </div>
    <pay-keyboard :payKeyboardShow.sync="payKeyboardShow" @complete="payComplete"></pay-keyboard>

    <van-dialog v-model="showConfirm" title="" show-cancel-button @confirm="confirm">
      <div class="confirm-transfer-popup">
        <div class="confirm-transfer-popup-li" v-if="transfer_id">{{ pageOptions.transferName || "--" }}ID：{{ transfer_id }}</div>
        <div class="confirm-transfer-popup-li" v-if="memberInfo.nickname">{{ pageOptions.transferName || "--" }}昵称：{{ memberInfo.nickname }}</div>
        <div class="confirm-transfer-popup-li" v-if="memberInfo.realname">{{ pageOptions.transferName || "--" }}姓名：{{ memberInfo.realname }}</div>
        <div class="confirm-transfer-popup-li">{{ pageOptions.transferText }}数额：{{ info_form.transfer_money }}</div>
        <div class="confirm-transfer-popup-warn">您是否确定{{ pageOptions.transferText }}？</div>
      </div>
    </van-dialog>
  </div>
</template>
<script>
import member_balance_transfer from "./transfercontroller";
export default member_balance_transfer;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.themeColor {
  color: var(--themeBaseColor);
}
.margin-top-6 {
  margin-top: 0.375rem;
}
#balance_recharge {
  .main {
    margin: 0 0.625rem;
    margin-top: -8rem;

    .txt {
      color: #fff;
      margin-bottom: 1rem;
    }

    .detailBox {
      margin-top: 0.9375rem;
      background: #fff;
      box-shadow: 0 0.0625rem 0.25rem 0 rgba(7, 11, 33, 0.11);
      border-radius: 0.5rem;
      padding: 0.875rem 1.25rem 1.25rem;

      .btn {
        width: 17.4688rem;
        height: 2.4375rem;
        background: var(--themeBaseColor);
        border-radius: 0.375rem;
        font-size: 0.9688rem;
        text-align: center;
        line-height: 2.4375rem;
        color: #fff;
        margin: 0 auto;
        margin-top: 2.4063rem;
      }

      .zzPrice {
        margin-top: 1rem;

        .title {
          font-size: 0.8125rem;
          color: #333;
          text-align: left;
        }

        .priceInpBox {
          border-bottom: 1px solid #f5f6f8;
          padding-top: 1.5625rem;
          display: flex;

          .priceTxt {
            line-height: 2.5rem;
            font-size: 0.9375rem;
          }

          input {
            height: 100%;
            flex: 1;
            border: none;
            width: 15.625rem;
            margin-left: 1rem;
            font-size: 1.5625rem;
          }
        }
        .deduct {
          text-align: left;
          color: #fa8647;
        }
      }

      .zhbanlace {
        height: 2.9063rem;
        display: flex;
        align-items: center;

        .title {
          flex-shrink: 0;
          font-size: 0.8125rem;
          color: #333;
        }

        input {
          height: 100%;
          flex: 1;
          border: none;
          width: 15.625rem;
          margin-left: 1rem;
          border-bottom: #f5f6f8 1px solid;
        }
      }

      .personal_info {
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: center;
        font-size: 0.8rem;
        color: var(--themeBaseColor);
        margin-top: 0.5625rem;

        li {
          display: flex;
          font-size: 0.75rem;
          text-align: left;

          span:first-child {
            display: block;
          }
        }

        li:last-child {
          margin-left: 0.625rem;
        }
      }
    }
  }

  .confirm-transfer-popup {
    padding: 1rem;

    .confirm-transfer-popup-li {
      font-size: 12px;
      text-align: left;
      margin-bottom: 10px;
    }

    .confirm-transfer-popup-warn {
      text-align: center;
      color: var(--themeBaseColor);
      font-size: 16px;
    }
  }
}
.van-button--hairline::after {
  border-width: 0px;
}
.disabled-class {
  background: #ebebeb!important;
}

</style>
